const {
    merge
} = require('webpack-merge')
const common = require('./webpack.common')('production')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = merge(common, {
    mode: 'production',
    output: {
        // contenthash只有文件内容不一样，产生的哈希值才会不一样,所以比较适合生产环境
        filename: 'js/[contenthash:8].js'
    },
    // 创建的 source map 不包含 sourcesContent(源代码内容).它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码
    //也可以用none,个人比较倾向nosources-source-map，因为即使测试团队测试过的应用，也不能保证在生产环境上不出问题，使用nosources-source-map
    // 可以快速帮助我们定位问题
    devtool: 'nosources-source-map',
    // 提取共用的js和css
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    optimization: {
        //  因为这里有配置会覆盖原有的生产环境的js压缩，所以还需要在配置下js代码压缩   
        minimizer: [
            // 压缩css
            new OptimizeCssAssetsWebpackPlugin(),
            // 压缩js
            new TerserWebpackPlugin()
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: ['public']
        }),
        new CleanWebpackPlugin()
    ]
})